<template>
  <view class="tool-bar flex flex-justify-between flex-items-center">
    <wd-icon
      name="delete1"
      :size="iconOption.fontSize"
      :color="iconOption.color"
      @click="clear"
    ></wd-icon>
    <wd-icon
      name="user"
      :size="iconOption.fontSize"
      :color="iconOption.color"
      @click="toSetting"
    ></wd-icon>
  </view>
</template>

<script lang="ts" setup>
import { useCalculatorStore } from '@/store/calculator'

const calculatorStore = useCalculatorStore()

const iconOption = ref({
  color: '#999',
  fontSize: '22px',
})

const clear = () => {
  nextTick(() => calculatorStore.clearHistory())
}

const toSetting = () => {
  uni.navigateTo({
    url: '/pages/setting/index',
  })
}
</script>

<style lang="scss" scoped>
.tool-bar {
  height: 70rpx;
  padding: 0 32rpx 0 50rpx;
}
</style>
